<template>
  <div class="wrapper">
    <!--  返回条和说明  -->
    <div class="wrapper">
      <!--  返回条  -->
      <div class="wrapper">
        <div class="return">
          <img class="returnImg" src="../../../assets/static/publicImg/back.png" alt=""/>
        </div>
      </div>
    </div>
    <!--  内容  -->
    <div class="wrapper">
      <div class="wrapper">
        <!--        item1-->
        <div class="wrapper">
          <!--          title-->
          <div class="lcon">
            <img class="locnImg" src="../../../assets/static/addReceiverAccount/a3.png" alt=""/>
            <span class="other party">对方账户</span>
          </div>
          <!--          input-->
          <div class="wrapper">
            <div class="wrapper">
              <div class="hsfsDiv">
                <span class=" hsfs">asfjso hsfs</span>
              </div>
              <div class="people">
                <img class="peopleImg" src="../../../assets/static/addReceiverAccount/a2.png" alt=""/>
              </div>
            </div>
            <div class="wrapper">
              <div class="amount of moneyDiv">
                <span class="amount of money">金额:</span>
              </div>
              <div class="numberDiv">
                <span class="number">0.00</span>
              </div>
            </div>
          </div>
        </div>
        <!--        item2-->
        <div class="wrapper">
          <div class="lcon">
            <img class="lconImg" src="../../../assets/static/addReceiverAccount/a3.png" alt="" />
            <span class="explain">说明</span>
          </div>
          <div class="wrapper">
            <div class="input">
              <input aria-placeholder="请输入文本"/>
            </div>
            <div class="wrapper">
              <div class="quantityDiv">
                <span class="quantity">0/200</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--    确认按钮  -->
      <div class="confirmDiv">
        <button class="confirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Middle',
}
</script>
/*-------------- div居中 -----------------*/
<style scoped>

.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcon{
  display: flex;
  align-items: center;
  justify-content: center;
}
.hsfsDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.people{
  display: flex;
  align-items: center;
  justify-content: center;
}
.amount of moneyDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.numberDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.quantityDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirmDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.input{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.other party{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.hsfs{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #66C107;
}
.amount of money{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.number{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.explain{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.quantity{
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.confirm{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
/*-------------- img图片 -----------------*/
.returnImg{
  width: 750px;
  height: 333px;
  opacity: 0.29;
}
.locnImg{
  width: 690px;
  height: 503px;
  background: #FFFFFF;
  box-shadow: 0px 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 16px;
}
.peopleImg{
  width: 642px;
  height: 80px;
  background: #FFFFFF;
  border: 1px solid #CBCBCB;
  box-shadow: 0px 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 16px;
}
</style>
